<template>
  <div id="user">
    <el-dialog title="设置选任归档经办人" :visible.sync="settingVisible" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form ref="settingForm" :model="settingForm" label-width="200px" :rules="settingFormRoles" >
        <el-form-item label="干部一处：" prop="userId1">
          <el-select v-model="settingForm.userId1" placeholder="请选择">
            <el-option v-for="(item, index) in userlist1" :key="index" :label="item.realName" :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="干部二处：" prop="userId2">
          <el-select v-model="settingForm.userId2" placeholder="请选择">
            <el-option v-for="(item, index) in userlist2" :key="index" :label="item.realName" :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="干部三处：" prop="userId3">
          <el-select v-model="settingForm.userId3" placeholder="请选择">
            <el-option v-for="(item, index) in userlist3" :key="index" :label="item.realName" :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="干部监督处：" prop="userId4">
          <el-select v-model="settingForm.userId4" placeholder="请选择">
            <el-option v-for="(item, index) in userlist4" :key="index" :label="item.realName" :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="综合处：" prop="userId4">
          <el-select v-model="settingForm.userId5" placeholder="请选择">
            <el-option v-for="(item, index) in userlist5" :key="index" :label="item.realName" :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="savesetting" :loading="saveLoading">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item><b>用户管理</b></el-breadcrumb-item>
    </el-breadcrumb>
    <el-dialog title="新增用户信息" :visible.sync="userAddFormVisible" width="35%" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="userAddForm" label-width="170px" :rules="userAddFormRules" ref="userAddForm">
        <el-form-item label="用户名" prop="UserName">
          <el-input v-model="userAddForm.UserName" auto-complete="off" style="width:217px;"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="TrueName">
          <el-input v-model="userAddForm.TrueName" auto-complete="off" style="width:217px;"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="UnitName">
          <el-select v-model="userAddForm.UnitName" placeholder="请选择部门" @change="changeunit">
            <el-option v-for="(item,index) in deptoptions" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主管部门" prop="Managedep" v-show="showmanagedep">
          <el-select v-model="userAddForm.Managedep" placeholder="请选择部门" multiple style="width:400px">
            <el-option v-for="(item,index) in managedepopthions" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="0" prop="Otherunitname" v-show="showOtherunitname">
          <label for="UnitName" class="el-form-item__label" style="width: 170px;"><span style="color: #F56C6C;margin-right: 4px;">*</span>单位名称</label>
          <el-input v-model="userAddForm.Otherunitname" auto-complete="off" style="width:417px;"></el-input>
        </el-form-item>
        <el-form-item label="初始密码" prop="PassWord">
          <el-input v-model="userAddForm.PassWord" auto-complete="off" style="width:217px;"></el-input> 不填写则为默认密码：123
        </el-form-item>
        <el-form-item label="立即启用" prop="Enable">
          <el-radio-group v-model="userAddForm.Enable">
            <el-radio label="启用"></el-radio>
            <el-radio label="停用"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="userAddFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="userAddFormSubmit" :loading="userAddFormLoading">新增</el-button>
      </div>
    </el-dialog>
    <div id="tree" v-show="treeShow">
      <el-scrollbar style="height: calc(100% + 16px);">
        <el-button type="primary" @click="userAdd" style="margin:10px; width:190px;float:left" icon="el-icon-user">新增用户</el-button>
        <el-tooltip content="设置选任归档经办人" placement="left" :open-delay="600">
          <el-button type="success" @click="setting" icon="el-icon-setting" style="float:left;padding-right:7px;margin:10px 0 0 0;" circle></el-button>
        </el-tooltip>
        <el-tree style="clear:both" accordion node-key="index" @current-change="testf" :expand-on-click-node="false" :render-content="renderContent" class="filter-tree" :data="treedata" ref="tree2" empty-text="正在加载..." :default-expanded-keys="defaultkey" :props="myprops"></el-tree>
      </el-scrollbar>
    </div>
    <div id="userdetail" :style="detailStyle">
      <OtherUserDetail v-if="isotheruser" :timestamp="usertimestamp" v-bind:myuserid='myuserid' v-on:treefreshevent="treefresh" v-on:treefreshnameevent="treefreshname"></OtherUserDetail>
      <UserDetail v-else :timestamp="usertimestamp" v-bind:myuserid='myuserid' v-on:treefreshevent="treefresh" v-on:treefreshnameevent="treefreshname"></UserDetail>
    </div>
  </div>
</template>
<script>
import UserDetail from '@/user/Detail.vue'
import OtherUserDetail from '@/user/OtherDetail.vue'
export default {
  components: {
    UserDetail, OtherUserDetail
  },
  data () {
    return {
      usertimestamp: '',
      settingFormRoles: {
        userId1: [{ required: true, message: '请选择经办人', trigger: 'blur' }],
        userId2: [{ required: true, message: '请选择经办人', trigger: 'blur' }],
        userId3: [{ required: true, message: '请选择经办人', trigger: 'blur' }],
        userId4: [{ required: true, message: '请选择经办人', trigger: 'blur' }],
        userId5: [{ required: true, message: '请选择经办人', trigger: 'blur' }]
      },
      settingForm: {
        userId1: '',
        userId2: '',
        userId3: '',
        userId4: '',
        userId5: ''
      },
      userlist1: [],
      userlist2: [],
      userlist3: [],
      userlist4: [],
      userlist5: [],
      myuserid: '',
      DicRoles: [],
      loadingtext: '选择左侧树中用户查看用户信息',
      userAddFormVisible: false, // 编辑界面是否显示
      userAddFormLoading: false,
      userAddForm: {
        UserName: '',
        PassWord: '',
        TrueName: '',
        UnitName: '',
        Managedep: [],
        Enable: '停用',
        Otherunitname: ''
      },
      roleoptions: [],
      deptoptions: [],
      managedepopthions: [],
      showmanagedep: false,
      showOtherunitname: false,
      myprops: {
        isLeaf: 'isLeaf'
      },
      treeVisible: true,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      treeShow: true,
      value1: true,
      treedata: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      mydeptnode: {},
      TreeLoading: false,
      detailStyle: {
        margin: '0 0 0 280px',
        width: 'calc(100% - 290px)'
      },
      btnStyle: 'treebtn',
      childdata: [],
      defaultkey: [],
      updateLogText: {},
      userAddFormRules: {
        UserName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        TrueName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        UnitName: [
          { required: true, message: '请选择部门', trigger: 'blur' }
        ]
      },
      ModuleList: [],
      settingVisible: false,
      timestamp: '',
      saveLoading: false,
      isotheruser: false
    }
  },

  methods: {
    savesetting () {
      this.$refs['settingForm'].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          let para = {
            userIds: [this.settingForm.userId1, this.settingForm.userId2, this.settingForm.userId3, this.settingForm.userId4, this.settingForm.userId5]
          }
          this.$http
            .post(this.$http.defaults.selectionAPI + `api/selection/auth/saveArchiveItems`, para)
            .then(response => {
              if (response.data.success) {
                this.$message({
                  message: '设置成功',
                  type: 'success'
                })
                this.settingVisible = false
              } else {
                this.$message({
                  message: '设置失败:' + response.data.message,
                  type: 'error'
                })
              }
              this.saveLoading = false
            })
            .catch(error => {
              console.log(error)
              this.$message({
                message: '网络请求失败:' + error,
                type: 'error'
              })
              this.saveLoading = false
            })
        }
      })
    },
    loaduserlist (deptname) {
      this.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/auth/queryDeptPersons`, {deptName: deptname})
        .then(response => {
          if (response.data.success) {
            switch (deptname) {
              case '干部一处':
                this.userlist1 = response.data.result
                break
              case '干部二处':
                this.userlist2 = response.data.result
                break
              case '干部三处':
                this.userlist3 = response.data.result
                break
              case '干部监督处':
                this.userlist4 = response.data.result
                break
              case '综合处':
                this.userlist5 = response.data.result
                break
            }
          } else {
            this.$message({
              message: '读取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络读取失败:' + error,
            type: 'error'
          })
        })
    },
    loadsetting () {
      this.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/auth/queryArchiveItems`)
        .then(response => {
          if (response.data.success) {
            if (response.data.result) {
              this.settingForm.userId1 = response.data.result.authItems[0]
              this.settingForm.userId2 = response.data.result.authItems[1]
              this.settingForm.userId3 = response.data.result.authItems[2]
              this.settingForm.userId4 = response.data.result.authItems[3]
              this.settingForm.userId5 = response.data.result.authItems[4]
            }
          } else {
            this.$message({
              message: '读取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络读取失败:' + error,
            type: 'error'
          })
        })
    },
    setting () {
      this.timestamp = new Date().getTime()
      this.settingVisible = true
    },
    changeunit () {
      this.userAddForm.Managedep = []
      this.userAddForm.Otherunitname = ''
      if (this.userAddForm.UnitName === '司领导') {
        this.showmanagedep = true
        this.showOtherunitname = false
      } else if (this.userAddForm.UnitName === '其他单位') {
        this.showmanagedep = false
        this.showOtherunitname = true
      } else {
        this.showmanagedep = false
        this.showOtherunitname = false
      }
    },
    // 新增
    userAddFormSubmit: function () {
      var _this = this
      this.$refs.userAddForm.validate((valid) => {
        if (valid) {
          if (this.userAddForm.UnitName === '其他单位' && (!this.userAddForm.Otherunitname || this.userAddForm.Otherunitname === '')) {
            _this.$message({
              message: '其他单位用户单位名称必须填写',
              type: 'error'
            })
            return false
          }
          _this.userAddFormLoading = true
          let para = {
            UserName: this.userAddForm.UserName,
            TrueName: this.userAddForm.TrueName,
            UnitName: this.userAddForm.UnitName,
            PassWord: this.userAddForm.PassWord,
            Managedep: this.userAddForm.Managedep,
            Otherunitname: this.userAddForm.Otherunitname,
            Enable: this.userAddForm.Enable
          }
          this.$http.post(`/admin/adduser`, para).then(function (response) {
            console.log(response.data.success)
            if (response.data.success === true) {
              _this.$message({
                message: '提交成功',
                type: 'success'
              })
              _this.$refs['userAddForm'].resetFields()
              _this.userAddFormVisible = false
              _this.userAddFormLoading = false
              _this.getTree()
            } else {
              console.log('提交失败:' + response.data.message)
              _this.$message({
                message: '提交失败:' + response.data.message,
                type: 'error'
              })
              _this.userAddFormLoading = false
            }
          }).catch(function (error) {
            console.log(error)
            _this.$message({
              message: '获取失败:' + error,
              type: 'error'
            })
            _this.userAddFormLoading = false
          })
          _this.addloading = false
        }
      })
    },
    getDept () {
      let para = {
        id: this.$route.params.id
      }
      var _this = this
      this.deptLoading = true
      this.$http
        .get(`/admin/depts`)
        .then(function (response) {
          console.log(para)
          _this.deptLoading = false
          console.log('获取成功')
          _this.deptoptions = response.data
          _this.managedepopthions = []
          for (let i = 0; i < response.data.length; i++) {
            if (response.data[i] !== '司领导') {
              _this.managedepopthions.push(response.data[i])
            }
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    userAdd: function () {
      this.userAddFormVisible = true
      this.showmanagedep = false
      console.log('显示新增界面:' + this.userAddFormVisible)
      if (this.$refs['userAddForm']) {
        this.$refs['userAddForm'].resetFields()
      }
    },
    getTree () {
      console.log('重新获取树')
      var _this = this
      this.TreeLoading = true
      this.$http
        .get('/admin/users/')
        .then(function (response) {
          _this.TreeLoading = false
          console.log('获取成功')
          console.log(response.data)
          _this.treedata = response.data
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    showtree () {
      if (this.treeShow) {
        this.treeShow = false
        this.detailStyle.margin = '0 0 0 10px'
        this.detailStyle.width = 'calc(100% - 20px)'
        this.btnStyle = 'treebtn1'
      } else {
        this.treeShow = true
        this.detailStyle.margin = '0 0 0 280px'
        this.detailStyle.width = 'calc(100% - 290px)'
        this.btnStyle = 'treebtn'
      }
    },
    TreeBtnsShow () {
      console.log(this.treeVisible)
      this.treeBtnsVisible = this.treeVisible
    },
    editshow () {
      console.log(this.value1)
    },
    testf: function () {
      if (this.$refs.tree2.getCurrentNode()['id'] !== '0') {
        this.myuserid = this.$refs.tree2.getCurrentNode()['id']
        this.isotheruser = this.$refs.tree2.getCurrentNode()['isotheruser']
        this.usertimestamp = new Date().getTime()
      }
      console.log('this.myuserid:' + this.myuserid)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    renderContent (h, { node, data, store }) {
      console.log('测试：' + this.value1)
      return (
        <span class="custom-tree-node" style="width:100%" title={data.title} >
          <i class={data.className} />
          <span style="line-height:28px">{node.label}</span>
        </span>
      )
    },
    treefresh (data) {
      this.mydeptnode.children = data
    },
    treefreshname (data) {
      this.mydeptnode.label = data
      this.mydeptnode.title = data
    }
  },
  mounted () {
    this.getTree()
    this.getDept()
    this.loaduserlist('干部一处')
    this.loaduserlist('干部二处')
    this.loaduserlist('干部三处')
    this.loaduserlist('干部监督处')
    this.loaduserlist('综合处')
    this.loadsetting()
  }
}
</script>
<style>
#user #tree i{
  padding-right:5px;
}
#user #tree {
  width: 260px !important;
  border:1px solid #95B8E7;
  height: calc(100% - 140px);
  background: #fff !important;
  padding-right:0;
  margin-top:0;
  margin-left:10px;
  overflow: hidden;
  float: left;
  position: fixed;
}
#user .treebtn{
  background:url(../assets/hidetree.png) no-repeat;
  left:273px;
  width:7px;
  height:28px;
  position:fixed;
  top: calc(50%);
  cursor: pointer;
}
#user .treebtn1{
  background:url(../assets/showtree.png) no-repeat;
  left:3px;
  width:7px;
  height:28px;
  position:fixed;
  top: calc(50%);
  cursor: pointer;
}
#userdetail{
  background: #fff;
  border:1px solid #95B8E7;
  height: calc(100% - 140px);
  float: left;
  position: fixed;
  padding:0 !important;
}
#user .el-tree{
  background: #fff;
}
#user .custom-tree-node {
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
#user .treeinput{
  margin: 10px;
  width: 336px !important;
  float:left
}
#user .deptbuttons{
  float:right;
}
#user .depttreebtn{
  float: left;
  margin:10px 10px 0 0 !important;
}
#user .depttreebtn{
  padding: 12px 8px 12px 13px !important;
}
#userdetail h1{
  height: 30px;
  border-bottom: 1px solid #95B8E7;
  font-family: '宋体';
  line-height: 30px;
  font-size:var(--size14) !important;
  color: #000;
  padding-left:10px;
  background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
  margin:0;
}
#userdetail h2{
  font-size:var(--size18) !important;
  border-bottom: 1px solid #95B8E7;
  background: #F5F7FA;
  padding:10px 20px;
}
#userdetail h3{
  width: 180px;
  text-align: right;
  font-size:var(--size18) !important;
}
#userdetail .module{
  padding:0 20px 20px;
}
#userdetail .grouptitle{
  font-size:var(--size14) !important;
  line-height: 19px;
  padding:0 20px 0 0;
  font-weight: bolder;
  clear:both;
  width: 200px;
  text-align: right;
  display:block;
  float: left;
}
#userdetail .submodule{
  padding-bottom:15px;
}
</style>
